<html>
<head>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact"></script>
<link rel="stylesheet" href="mystyling.css" />

<script>
dojo.require("esri.map");

var map;
var map_zoomLevel = 15;
var car_longitude;
var car_latitude;
var url_prefix = "http://199.204.218.79/vehicledata/cardata.svc/xml/";
var url_driver = "cwc";
var url_car = "livecar";
var url_item = "VehicleSpeed";

function init() 
{

// Extract a value from the PI Server
var currentValue = getValueFromPI(url_prefix, url_driver, url_car, "VehicleSpeed");

// Write that value to the HTML document
var newInnerText = "Speed: " + currentValue + " kph";
$("#value_speed").text(newInnerText);

// Get the latitude and longitude
car_longitude = getValueFromPI(url_prefix, url_driver, url_car, "Longitude");
car_latitude = getValueFromPI(url_prefix, url_driver, url_car, "Latitude");
//alert(car_longitude + " " + car_latitude);

// Set the map options
var options = 
{
basemap: "gray",
center: [car_longitude, car_latitude],
zoom: map_zoomLevel
}

// Create the map object
map = new esri.Map("mapDiv",options);

		
// Set title
document.title = 'myapp';
}








dojo.addOnLoad(init);



function getValueFromPI(prefix, driver, car, item) 
{
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET", (prefix + driver + "/" + car + "/" + item),false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
return (xmlDoc.getElementsByTagName("Value")[0].childNodes[0].nodeValue);
}


</script>

</head>
<body>

<div data-role="header" data-theme="b"> 
	<h1>Car Position</h1> 
</div> 

<div data-role="collapsible">
<h3>Map Style</h3>
<div data-role="button" data-theme="e" data-mini="true" onclick="map.setBasemap('streets');">Streets</div>
<div data-role="button" data-theme="e" data-mini="true" onclick="map.setBasemap('satellite');">Satellite</div>
<div data-role="button" data-theme="e" data-mini="true" onclick="map.setBasemap('hybrid');">Hybrid</div>
<div data-role="button" data-theme="e" data-mini="true" onclick="map.setBasemap('topo');">Topo</div>
<div data-role="button" data-theme="e" data-mini="true" onclick="map.setBasemap('gray');">Gray</div>
<div data-role="button" data-theme="e" data-mini="true" onclick="map.setBasemap('national-geographic');">National Geographic</div>
</div>

<div id="mapDiv"></div>

<div data-role="header" id="wrapper_speed" data-theme="c"> 
	<h1 id="value_speed">Speed: </h1> 
</div> 

</body>
</html>